<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业授权书模版</title>
    <style>
        body {
            background-color: #f4f4f5;
            font-family: "SimSun", sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

       .a4-container {
            width: 210mm;
            min-height: 297mm;
            padding: 32px;
            background-color: #fff;
            box-shadow: 0 4px 6 -1px rgba(0, 0, 0, 0.1), 0 2px 4 -1px rgba(0, 0, 0, 0.06);
            border-radius: 8px;
            position: relative;
            box-sizing: border-box;
        }

       .title {
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            color: #000;
            margin-bottom: 24px;
        }

       .content-text {
            color: #000;
            line-height: 1.2;
            margin-bottom: 16px;
            text-indent: 2em;
        }

       .rule-list {
            list-style-type: decimal;
            padding-left: 24px;
            color: #000;
            line-height: 1.75;
            margin-bottom: 32px;
        }

       .editable {
            border-bottom: 1px solid #000;
            outline: none;
            display: inline-block;
            text-indent: 0px;
            min-width: 100px;
        }

       .print-button {
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            padding: 10px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

       .print-button:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }

       .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        @media print {
            body {
                background-color: transparent;
            }

           .a4-container {
                box-shadow: none;
                border-radius: 0;
                width: 210mm;
                min-height: 297mm;
                margin: 0;
                padding: 32px;
                page-break-after: avoid;
            }

           .print-button {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="a4-container">
        <h1 class="title" contenteditable="true">授权书</h1>
        <div class="info-row">
            <p class="content-text">授权方：<span class="editable" contenteditable="true" data-default="[授权方企业名称]">[授权方企业名称]</span></p>
            <p class="content-text">被授权方：<span class="editable" contenteditable="true" data-default="[被授权方企业名称]">[被授权方企业名称]</span></p>
        </div>
        <p class="content-text">鉴于授权方拥有 <span class="editable" contenteditable="true" data-default="[具体授权内容]">[具体授权内容]</span> 的相关权利，为了更好地开展业务，经双方友好协商，授权方特授权被授权方在以下范围内行使相关权利：</p>
        <ol class="rule-list">
            <li><strong>授权范围</strong>
                <p class="content-text">被授权方有权在 <span class="editable" contenteditable="true" data-default="[授权地域范围]">[授权地域范围]</span> 内，使用授权方的 <span class="editable" contenteditable="true" data-default="[授权权利内容，如商标、技术等]">[授权权利内容，如商标、技术等]</span> 进行 <span class="editable" contenteditable="true" data-default="[具体业务活动]">[具体业务活动]</span>。</p>
            </li>
            <li><strong>授权期限</strong>
                <p class="content-text">本授权书的有效期自 <span class="editable" contenteditable="true" data-default="[授权起始日期]">[授权起始日期]</span> 至 <span class="editable" contenteditable="true" data-default="[授权截止日期]">[授权截止日期]</span>。</p>
            </li>
            <li><strong>双方权利与义务</strong>
                <ol type="a">
                    <li>授权方有权监督被授权方对授权权利的使用情况，如发现被授权方有违反本授权书的行为，授权方有权随时终止本授权。</li>
                    <li>被授权方应按照本授权书的规定使用授权权利，不得将授权权利转让给任何第三方，不得超出授权范围使用授权权利。</li>
                    <li>被授权方应维护授权方的品牌形象和声誉，不得从事任何损害授权方利益的行为。</li>
                    <li>被授权方在使用授权权利过程中产生的一切法律责任和经济责任，由被授权方自行承担。</li>
                </ol>
            </li>
            <li><strong>违约责任</strong>
                <ol type="a">
                    <li>若被授权方违反本授权书的规定，授权方有权要求被授权方立即停止侵权行为，并承担由此给授权方造成的一切损失。</li>
                    <li>若授权方无故终止本授权，应赔偿被授权方因此遭受的经济损失。</li>
                </ol>
            </li>
            <li><strong>争议解决</strong>
                <p class="content-text">凡因执行本授权书所发生的或与本授权书有关的一切争议，双方应通过友好协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。</p>
            </li>
            <li><strong>其他条款</strong>
                <ol type="a">
                    <li>本授权书未尽事宜，双方可签订补充协议。本授权书的补充协议为其不可分割的一部分，与本授权书具有同等法律效力。</li>
                    <li>本授权书壹式2份，双方各执1份，具有同等法律效力。</li>
                    <li>本授权书自双方签字盖章之日起生效。</li>
                </ol>
            </li>
        </ol>
        <div class="info-row">
            <p class="content-text">授权方：<span class="editable" contenteditable="true" data-default="[授权方企业名称]">[授权方企业名称]</span></p>
            <p class="content-text">被授权方：<span class="editable" contenteditable="true" data-default="[被授权方企业名称]">[被授权方企业名称]</span></p>
        </div>
        <div class="info-row">
            <p class="content-text">授权代表：<span class="editable signature-line" contenteditable="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
            <p class="content-text">被授权代表：<span class="editable signature-line" contenteditable="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
        </div>
        <div class="info-row">
            <p class="content-text">日期：<span class="editable" contenteditable="true" data-default="[签字日期]">[签字日期]</span></p>
            <p class="content-text">日期：<span class="editable" contenteditable="true" data-default="[签字日期]">[签字日期]</span></p>
        </div>
    </div>
    <button class="print-button" onclick="window.print()">打印</button>
    <script>
        // 设置当前日期
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        const day = String(currentDate.getDate()).padStart(2, '0');
        const currentDateStr = `${year}年${month}月${day}日`;
        document.querySelectorAll('.editable[data-default="[签字日期]"]').forEach(el => {
            el.textContent = currentDateStr;
        });

        // 处理可编辑区域的交互
        document.querySelectorAll('.editable').forEach(element => {
            // 保存原始值
            const defaultValue = element.dataset.default || '';
            
            // 聚焦时清空默认文本
            element.addEventListener('focus', function() {
                if (this.textContent === defaultValue) {
                    this.textContent = '';
                }
            });
            
            // 失去焦点时恢复默认文本（如果为空）
            element.addEventListener('blur', function() {
                if (this.textContent.trim() === '' && defaultValue) {
                    this.textContent = defaultValue;
                }
            });
            
            // 只同步授权方和被授权方的名称
            if (element.dataset.default === "[授权方企业名称]" || element.dataset.default === "[被授权方企业名称]") {
                element.addEventListener('input', function() {
                    const sameElements = document.querySelectorAll(`.editable[data-default="${this.dataset.default}"]`);
                    sameElements.forEach(el => {
                        if (el !== this) {
                            el.textContent = this.textContent;
                        }
                    });
                });
            }
        });
    </script>
</body>

</html>